<template>
    <view :style="{ '--color': color, '--name-size': pageSet.nameSize * 2 + 'rpx', '--price-color': pageSet.priceColor, '--btn-color': pageSet.btnColor,
        '--back-color': $common.hexToRgba(color, 0.1) }">
        <view class="content bgwhite d-flex f-column">
            <status-bar :title="tabTitle" back="0" search="1"></status-bar>

            <view class="search-content f-shrink-0 d-flex a-center" v-if="pageSet.locate || pageSet.search">
                <view class="position-box bgF5 d-flex a-center" v-if="city && pageSet.locate" @click="toUrl('/pages/classify/citySelect')">
                    <text class="iconfont icon-dingwei size30 thmeColor m-right10"></text>
                    <text class="size26 color_33 lines" style="max-width: 180rpx">{{ city }}</text>
                </view>
                <navigator class="flex-1" url="/pages/classify/search" v-if="pageSet.search">
                    <view class="kite-search bgF5 d-flex a-center">
                        <text class="iconfont icon-btn_search"></text>
                        <view class="color_77 p-left12">请输入搜索信息</view>
                    </view>
                </navigator>
            </view>

            <!-- 组件 -->
            <view v-if="pageData.length">
                <block v-for="(item, index) in pageData" :key="index">
                    <Bannel v-if="item.type == 'banner'" :pageData="item.compCont" :isImmerse="1"></Bannel>
                    <adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
                    <hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
                    <VideoList v-if="item.type == 'video'" :pageData="item.compCont"></VideoList>
                    <divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
                </block>
            </view>

            <!-- 只有顶级分类 -->

            <view class="topkite padding20-30" v-if="onceLevel.length && pageSet.showCate == 2">
                <view class="m-bot20" @click="toGoodsList(item.classify_id, item.classify_name)" v-for="(item, index) in onceLevel" :key="index">
                    <image :src="item.classify_atlas ? $imgUrls(item.classify_atlas) : staticUrl + '/images/imageLoading.png'" mode="widthFix" :class="{ bor_radius_16: pageSet.round }"></image>
                </view>
            </view>

            <!-- 侧边顶级 -->
            <view class="kite-wrapper d-flex flex-1" v-if="onceLevel.length && (pageSet.showCate == 0 || (pageSet.showCate == 1 && pageSet.cateStyle < 2))">
                <!-- 左侧一级分类 -->
                <view class="kite-classify d-flex f-column">
                    <view>
                        <view
                            class="kite-classify-names"
                            v-for="(item, index) in onceLevel"
                            :key="index"
                            @click="classifyChk(item.classify_id, index, 1, item)"
                            :class="{ 'kite-classify-active thmeColor': current == index, 'active-prev': current - 1 == index, 'active-next': current + 1 == index }"
                        >
                            <view class="kite-classify-box">{{ item.classify_name }}</view>
                        </view>
                    </view>
                    <view class="flex-1 bgF5" :class="{ 'active-next': current == onceLevel.length - 1 }"></view>
                </view>

                <!-- 显示下级分类 -->
                <view class="flex-1 scroll-y padding20" v-if="pageSet.showCate == 1">
                    <!-- 形象图 -->
                    <view class="m-bot20" @click="toGoodsList(onceLevel[current].classify_id, onceLevel[current].classify_name)" v-if="onceLevel[current].classify_atlas">
                        <image :src="$imgUrls(onceLevel[current].classify_atlas)" mode="widthFix" :class="{ bor_radius_16: pageSet.round }"></image>
                    </view>
                    <view v-if="!pageSet.cateStyle">
                        <!-- 有三级分类独立显示 -->
                        <view v-if="list1.length">
                            <view class="kite-goods" v-for="(item, index) in list1" :key="index">
                                <view class="kite-goods-title size28 color_33 bold">{{ item.name }}</view>
                                <view class="d-flex f-wrap">
                                    <view class="kite-goods-warpper" v-for="(e, i) in item.li" :key="i">
                                        <navigator hover-class="none" :url="'/pages/goods/goods_list?classId=' + e.id + '&className=' + e.name">
                                            <view class="kite-img-box flexac">
                                                <image class="kite-goods-img" :src="e.img ? $imgUrls(e.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFit"></image>
                                            </view>
                                            <view>{{ e.name }}</view>
                                        </navigator>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="kite-goods d-flex f-wrap" v-if="list2.length">
                            <view class="kite-goods-warpper" v-for="(item, index) in list2" :key="index">
                                <navigator hover-class="none" :url="'/pages/goods/goods_list?classId=' + item.id + '&className=' + item.name">
                                    <view class="kite-img-box flexac">
                                        <image class="kite-goods-img" :src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFit"></image>
                                    </view>
                                    <view>{{ item.name }}</view>
                                </navigator>
                            </view>
                        </view>
                    </view>

                    <view v-if="pageSet.cateStyle == 1">
                        <view v-if="list2.length">
                            <view class="m-bot20" @click="toGoodsList(item.id, item.name)" v-for="(item, index) in list2" :key="index">
                                <image :src="item.atlas ? $imgUrls(item.atlas) : staticUrl + '/images/imageLoading.png'" mode="widthFix" :class="{ bor_radius_16: pageSet.round }"></image>
                            </view>
                        </view>
                        <view v-if="list1.length">
                            <view v-for="(item, index) in list1" :key="index">
                                <view class="d-flex a-center p-top10 p-bot10 m-bot20 bot_bor_ee" @click="toGoodsList(item.id, item.name)">
                                    <view class="size32 color_33 bold flex-1">{{ item.name }}</view>
                                    <text class="iconfont icon-xiangyouxiayiye size28"></text>
                                </view>
                                <view class="m-bot20" @click="toGoodsList(e.id, e.name)" v-for="(e, i) in item.li" :key="i">
                                    <image :src="e.atlas ? $imgUrls(e.atlas) : staticUrl + '/images/imageLoading.png'" mode="widthFix" :class="{ bor_radius_16: pageSet.round }"></image>
                                </view>
                            </view>
                        </view>
                    </view>

                    <empty cat="4" v-if="noData1" :msg="'“' + onceLevel[current].classify_name + '”暂无分类'"></empty>
                </view>

                <!-- 显示商品 -->
                <view class="flex-1 p-re" :style="{ '--rgbacolor': rgbaColor }" v-if="pageSet.showCate == 0">
                    <block v-if="structure[current] && structure[current].brand">
                        <!-- 品牌 -->
                        <scroll-view scroll-x :scroll-into-view="`tab${brand_id}`" class="subkite p-left15 p-ab">
                            <view
                                class="item bgF5 size26 color_66 m-right20 d-inline-block"
                                v-for="(item, index) in structure[current].brand"
                                :key="index"
                                :class="{ thmeColor: brand_id == item.brand_id }"
                                :id="`tab${item.brand_id}`"
                                @click="classifyChk_Brand(item.brand_id, current)"
                            >
                                {{ item.brand_name }}
                            </view>
                        </scroll-view>
                    </block>

                    <block v-else>
                        <scroll-view scroll-x :scroll-into-view="`tab${classifyId}`" class="subkite p-left15 p-ab" v-if="structure[current] && structure[current].listNum">
                            <view
                                class="item bgF5 size26 color_66 m-right20 d-inline-block"
                                v-for="(item, index) in structure[current].list"
                                :key="index"
                                :class="{ thmeColor: classifyId == item.id }"
                                :id="`tab${item.id}`"
                                @click="classifyChk(item.id, current, 2)"
                            >
                                {{ item.name }}
                            </view>
                        </scroll-view>
                    </block>
                    <scroll-view
                        scroll-y
                        @scrolltolower="scrolltolowerList"
                        class="wh border-box"
                        :class="{ 'p-top100': (structure[current] && structure[current].listNum) || (structure[current] && structure[current].brand) }"
                    >
                        <view class="lr-space" v-if="pageList.length">
                            <view class="row j-sb" v-if="!pageSet.listStyle">
                                <view
                                    class="list m-bot20 bor_radius_10"
                                    v-for="(item, index) in pageList"
                                    :key="index"
                                    @click="toGoodsDetail(item)"
                                    :class="{ border: !pageSet.goodStyle, shadow: pageSet.goodStyle == 1 }"
                                >
                                    <view class="p-re">
                                        <image :src="$imgUrls(item.img)" mode="aspectFill" :style="{ height: 260 * item.img_proportion + 'rpx' }"></image>
                                        <view class="masks wh p-ab flexac" v-if="item.stock == 0">
                                            <image :src="$imgUrls('Uploads/diy/img/sold.png')" class="sold"></image>
                                        </view>
                                    </view>
                                    <view class="padding10 color_33">
                                        <view class="goodname ellipsis_2">{{ item.name }}</view>
                                        <view class="color_99 m-top10" v-if="item.sales_number != 0">已售{{ item.sales_number }}</view>
                                        <view class="profitTitle_ lines" v-if="item.profitTitle && item.goods_cate != 6">
                                            <text>{{ item.profitTitle }}</text>
                                        </view>
                                        <view class="row j-sb a-center m-top20">
                                            <view class="price d-flex a-center">
                                                <text class="h7">￥</text>
                                                <text class="size32">{{ item.price }}</text>
                                            </view>
                                            <view class="shopName size22 white" v-if="currentItem.structure == 1 && item.goods_cate != 6" @click.stop="openPop(item)">立即购买</view>
                                        </view>
                                        <view class="profit_title m-top10" v-if="item.profitTitle && item.goods_cate == 6">{{ item.profitTitle }}</view>
                                    </view>
                                </view>
                            </view>

                            <view class="list-1" v-if="pageSet.listStyle == 1">
                                <view
                                    class="d-flex a-center padding20 m-bot20 bor_radius_10"
                                    v-for="(item, index) in pageList"
                                    :key="index"
                                    :class="{ border: !pageSet.goodStyle, shadow: pageSet.goodStyle == 1, 'f-row-reverser': index % 2 }"
                                    @click="toGoodsDetail(item)"
                                >
                                    <image :src="$imgUrls(item.img)" mode="aspectFill" class="img bor_radius_10"></image>
                                    <view class="flex-1" :class="{ 'text-right p-right20': index % 2, 'p-left20': index % 2 == 0, 'text-center': pageSet.textCenter }">
                                        <view class="goodname ellipsis">{{ item.name }}</view>
                                        <view class="profitTitle_ lines" v-if="item.profitTitle">
                                            <text>{{ item.profitTitle }}</text>
                                        </view>
                                        <view class="m-top10">
                                            <text class="price size32 m-right10">￥{{ item.price }}</text>
                                            <text class="color_99 line-through">￥{{ item.full_price }}</text>
                                        </view>
                                        <view class="shopName white m-top10 d-inline-block" @click.stop="openPop(item)" v-if="item.goods_cate != 6">
                                            <text class="iconfont icon-gouwuche h6 m-right8"></text>
                                            <text>立即购买</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <empty cat="4" v-if="noData1" msg="还没有相关商品哦~"></empty>
                    </scroll-view>
                </view>
            </view>

            <!-- 标签面板 -->
            <view class="topkite tagPanel bgF5 flex-1" v-if="onceLevel.length && pageSet.showCate == 1 && pageSet.cateStyle == 2">
                <view class="panel bgwhite padding30 m-bot24" v-for="(item, index) in onceLevel" :key="index">
                    <view class="d-flex a-center" @click="toGoodsList(item.classify_id, item.classify_name)">
                        <view class="size28 color_22 bold flex-1">{{ item.classify_name }}</view>
                        <text class="iconfont icon-xiangyouxiayiye h7 color_b4"></text>
                    </view>
                    <view class="d-flex f-wrap j-sb text-center m-top14" v-if="structure[index] && structure[index].listNum">
                        <view
                            class="item bgf7f7 bor_radius_4 size26 color_44 m-top16 ellipsis"
                            v-for="(subItem, subIndex) in structure[index].list"
                            :key="subIndex"
                            @click="toGoodsList(subItem.id, subItem.name)"
                        >
                            {{ subItem.name }}
                        </view>
                    </view>
                </view>
            </view>

            <!-- 分类+推荐商品/门店 -->
            <view v-if="onceLevel.length && pageSet.showCate == 3">
                <view class="classNav bgwhite" :style="{ top: totalHeight + 'px' }">
                    <u-tabs
                        :list="onceLevel"
                        keyName="classify_name"
                        :current="current"
                        lineWidth="0"
                        @click="(e) => classifyChk(e.classify_id, e.index)"
                        :inactiveStyle="{ color: '#111', transform: 'scale(1)' }"
                        :activeStyle="{ color, fontWeight: 'bold', transform: 'scale(1.15)' }"
                    ></u-tabs>
                </view>
                <view class="gridList d-flex f-wrap" v-if="structure[current] && structure[current].listNum">
                    <view class="w-20 text-center m-bot30" v-for="(item, index) in structure[current].list" :key="index" @click="toGoodsList(item.id, item.name)">
                        <image :src="item.classify_img ? $imgUrls(item.classify_img) : staticUrl + '/images/imageLoading.png'" mode="aspectFit"></image>
                        <view class="size26 p-top10">{{ item.name }}</view>
                    </view>
                </view>
                <view class="classNav bgwhite" :style="{ top: totalHeight + 44 + 'px', borderTop: '12rpx solid #f5f6f8' }">
                    <u-tabs :list="tabList" keyName="title" :current="tabIndex" :lineColor="color" @click="(e) => (tabIndex = e.index)"></u-tabs>
                </view>
                <view class="topkite" v-if="tabList.length">
                    <view class="padding20" v-if="tabList[tabIndex].type == 'store'">
                        <view
                            class="storeItem bor_radius_20 padding30-20 m-bot30"
                            v-for="(item, index) in tabList[tabIndex].list"
                            :key="index"
                            @click="toUrl('/pages/store/storeIndex?shop_id=' + item.shop_id)"
                        >
                            <view class="d-flex a-center m-bot30">
                                <image class="logo bor_radius m-right20" :src="$imgUrls(item.logo)" mode="aspectFill"></image>
                                <view class="flex-1">
                                    <view class="size30 ellipsis m-bot10">{{ item.name }}</view>
                                    <view class="color_99 ellipsis">{{ item.address }}</view>
                                </view>
                                <view class="thmeBg size26 white padding8-24 bor_radius_30">进店</view>
                            </view>
                            <view class="bgFA bor_radius_30s scroll-x d-flex">
                                <view class="m-right6 p-re" v-for="(e, i) in item.goodsList" :key="i" @click.stop="toGoodsDetail(e)">
                                    <image :src="$imgUrls(e.img)" mode="aspectFill" class="img"></image>
                                    <view class="badge p-ab bor_radius_20 padding2-14 white">￥{{ parseFloat(e.price) }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="padding20-30 d-flex f-wrap j-sb" v-else>
                        <view class="goodsItem m-bot40" v-for="(item, index) in tabList[tabIndex].list" :key="index" @click="toGoodsDetail(item)">
                            <image class="bor_radius_20" :src="$imgUrls(item.img)" mode="aspectFill"></image>
                            <view class="goodname ellipsis_2 m-top20">{{ item.name }}</view>
                            <view class="profitTitle_ lines" v-if="item.profitTitle">
                                <text>{{ item.profitTitle }}</text>
                            </view>
                            <view class="price m-top20">
                                <text>￥</text>
                                <text class="size32">{{ item.price }}</text>
                                <text class="color_99 m-left10 p-right10 right_bor_dd" v-if="item.chapterNum">共{{ item.chapterNum }}章节</text>
                                <text class="color_99 m-left10">已售{{ item.sales_number }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <empty cat="2" v-if="noData" :msg="msg"></empty>
        </view>
        <tabBar :tab="3"></tabBar>

        <specsPopup :showPopup="showPopup" :pageData="info" @close="showPopup = false" />
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Bannel from '@/components/home/Bannel.vue';
    import adv from '@/components/home/adv.vue';
    import hotZone from '@/components/home/hotZone.vue';
    import VideoList from '@/components/home/VideoList.vue';
    import divider from '@/components/home/divider.vue';
    import specsPopup from '@/components/specsPopup.vue';
    import Api from '@/common/Api.js'
    export default {
        data() {
            return {
                staticUrl: this.staticUrl,
                classifyId: '',
                current: 0,
                onceLevel: [],
                list1: [],
                list2: [],
                noData: false,
                noData1: false,
                msg: '',
                page: 1,
                pageNum: 10,
                pageList: [],
                getMore: true,
                pageSet: {
                    // 页面设置
                    showCate: '0',
                    cateStyle: 0,
                    round: false,
                    listStyle: 0,
                    goodStyle: 0,
                    textCenter: false,
                    nameSize: 12,
                    priceColor: '#333',
                    btnColor: '#FF0B03'
                },
                pageData: '', // diy组件
                structure: [],
                tabList: [],
                tabIndex: 0,
                cateType: 0, // 为1显示课程分类
                showPopup: false,
                info: '',
                showModal: false,
                brand_id: 0,
                currentItem: '',
                windowauth: '',
                user_status: 0, // 0未注册 1未完成注册 2未实名 3已注册但没绑定机构 4已注册已绑定机构
                openBusinessView: {
                    businessType: '',
                    queryString: ''
                },
                extraData: {
                    headSupplierAppid: '', // 需要填入您的机构appid
                    commissionType: 1, // 1代表机构自己分佣
                    commissionRatio: 0 // 机构自己分佣时设为0
                }
            };
        },
        computed: {
            ...mapState(['tabTitle', 'color', 'city', 'vid', 'share', 'totalHeight']),
            rgbaColor() {
                return 'rgba(' + parseInt('0x' + this.color.slice(1, 3)) + ',' + parseInt('0x' + this.color.slice(3, 5)) + ',' + parseInt('0x' + this.color.slice(5, 7)) + ',' + 0.1 + ')';
            }
        },
        components: {
            Bannel,
            adv,
            hotZone,
            VideoList,
            divider,
            specsPopup
        },
        onLoad(e) {
            if (e.cateType) this.cateType = e.cateType;
            if (e.classifyId) this.classifyId = e.classifyId;
            Promise.all([this.diyget(), this.topCategory()]).then((results) => {
                console.log('results', results);
                if (this.pageSet.showCate == 1 && this.pageSet.cateStyle < 2) this.goodsType();
                if (this.pageSet.showCate == 0) {
                    this.sortClassGoods();
                    this.structure.forEach((item) => {
                        if (item.listNum)
                            item.list = [
                                {
                                    id: item.classify_id,
                                    name: '全部'
                                },
                                ...item.list
                            ];

                        // 品牌
                        if (item.brand && item.brand.length)
                            item.brand = [
                                {
                                    brand_id: 0,
                                    brand_name: '全部'
                                },
                                ...item.brand
                            ];
                    });
                    console.log(this.structure);
                }
                if (this.pageSet.showCate == 3) this.getRecommend();
            });
        },
        onShow() {
            this.getUserBindInfo()
        },
        methods: {
            async getUserBindInfo() {
                const requestResult = await Api.getUserBindInfo();
                if (requestResult.windowauth) this.windowauth = requestResult.windowauth;
                this.user_status = requestResult.user_status;
                if (this.user_status == 4) return;
                const result = requestResult.data;
                this.openBusinessView = {
                    businessType: result.businessType,
                    queryString: result.queryString
                };
                this.extraData = {
                    headSupplierAppid: result.extraData.headSupplierAppid,
                    commissionType: result.extraData.commissionType,
                    commissionRatio: result.extraData.commissionRatio
                };
            },
            diyget() {
                return new Promise((resolve) => {
                    this.$http
                        .get({
                            url: '/newdiy/api/v1/diy/getDiyPage',
                            data: {
                                front: 1,
                                type: 4
                            }
                        })
                        .then((res) => {
                            if (res.data) {
                                if (res.data.pageSet) {
                                    this.pageSet = res.data.pageSet;
                                    this.pageData = res.data.front_value || [];
                                } else {
                                    this.initSet();
                                }
                            } else {
                                this.initSet();
                            }
                            resolve(res);
                        });
                });
            },
            initSet() {
                this.pageSet.locate = true;
                this.pageSet.search = true;
            },
            topCategory() {
                this.noData = false;
                return new Promise((resolve) => {
                    this.$http
                        .post({
                            url: '/singleSaleApi/allUpList',
                            data: {
                                classify_cate: this.cateType
                            }
                        })
                        .then((res) => {
                            if (res.errcode != '100') {
                                this.onceLevel = [];
                                this.noData = true;
                                this.msg = res.msg ? res.msg : '没有任何分类哦';
                                return;
                            }
                            this.onceLevel = res.data || [];
                            this.structure = res.structure || [];
                            if (this.classifyId) {
                                const index = this.onceLevel.findIndex((item) => item.classify_id == this.classifyId);
                                if (index > -1) this.current = index;
                            }
                            if (!this.classifyId) this.classifyId = this.onceLevel[0].classify_id;

                            resolve(res);
                        });
                });
            },
            goodsType() {
                this.noData1 = false;
                this.$http
                    .post({
                        url: '/singleSaleApi/goodsList',
                        data: {
                            classify_id: this.classifyId,
                            city: this.city ? this.city : '',
                            classify_cate: this.cateType
                        }
                    })
                    .then((res) => {
                        let result = res.data.list || [];
                        if (!result.length) return (this.noData1 = true);
                        this.list1 = result.filter((item) => item.count);
                        this.list2 = result.filter((item) => !item.count);
                    });
            },
            sortClassGoods() {
                this.noData1 = false;
                this.$http
                    .post({
                        url: '/singleSaleApi/sortClassGoods',
                        data: {
                            page: this.page,
                            pageNum: this.pageNum,
                            classify_id: this.classifyId,
                            brand_id: this.brand_id,
                            mode: 1,
                            goods_cate: this.cateType
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        let result = res.data.DataArr || [];
                        this.pageList = this.page == 1 ? result : [...this.pageList, ...result];
                        if (result.length < this.pageNum) this.getMore = false;
                        if (!this.pageList.length) this.noData1 = true;
                    });
            },
            getRecommend() {
                this.tabList = [];
                this.tabIndex = 0;
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/getRelatedRecommend',
                        data: {
                            classify_id: this.classifyId,
                            type: this.cateType,
                            num: 20
                        }
                    })
                    .then((res) => {
                        for (let key in res.data) {
                            if (res.data[key].state == 1) {
                                this.tabList.push({
                                    type: key,
                                    ...res.data[key]
                                });
                            }
                        }
                    });
            },
            classifyChk_Brand(id, index) {
                if (this.brand_id != id) {
                    this.current = index;
                    this.brand_id = id;
                    if (this.pageSet.showCate == 1) {
                        this.list1 = [];
                        this.list2 = [];
                        this.goodsType();
                    } else if (this.pageSet.showCate == 0) {
                        this.page = 1;
                        this.getMore = true;
                        this.sortClassGoods();
                    } else if (this.pageSet.showCate == 3) {
                        this.getRecommend();
                    }
                }
            },

            classifyChk(id, index, Type, Item) {
                if (this.classifyId != id) {
                    this.current = index;
                    this.classifyId = id;
                    this.currentItem = Item;
                    if (Type == 1) this.brand_id = 0;
                    if (this.pageSet.showCate == 1) {
                        this.list1 = [];
                        this.list2 = [];
                        this.goodsType();
                    } else if (this.pageSet.showCate == 0) {
                        this.page = 1;
                        this.getMore = true;
                        this.sortClassGoods();
                    } else if (this.pageSet.showCate == 3) {
                        this.getRecommend();
                    }
                }
            },

            scrolltolowerList() {
                if (!this.getMore) return;
                this.page++;
                this.sortClassGoods();
            },
            toGoodsList(id, name) {
                this.toUrl('/pages/goods/goods_list?classId=' + id + '&className=' + name);
            },
            async toGoodsDetail(item) {
                if (item.goods_cate == 1) return this.$toCourses(item.goods_id);
                if (item.goods_cate == 6) {
                    if (!this.vid) return (this.showModal = true);
                    this.ShareBtn(item)
                    return;
                }
                this.toGoods(item.goods_id);
            },
            openPop(item) {
                if (!this.vid) return (this.showModal = true);
                this.info = item;
                this.showPopup = true;
            },
            async ShareBtn(Item) {
                const myData = Item.myData;
                if (Item.share_verification == 1 && !myData.sharer_appid) {
                    const reuslt = await this.$Modals('您还未授权成为推客', '成为推客后分享商品可产生收益');
                    if (reuslt) this.Business();
                    return;
                } else {
                    this.toUrl(`/weiDian/weiShare?goods_id=${Item.goods_id}`);
                }
            },
            Business() {
                if (!this.openBusinessView.businessType) {
                    console.log('businessType为空');
                    this.$Toast('未获取到正确的商家信息');
                    return;
                }
                this.$pop.openBusinessView(this.openBusinessView.businessType, this.openBusinessView.queryString, this.extraData);
            }
        },
        onShareAppMessage() {
            let share = this.share;
            return {
                title: share.title,
                desc: share.desc,
                path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
                imageUrl: `${share.imageUrl}`
            };
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        height: calc(100vh - 100rpx - constant(safe-area-inset-bottom));
        height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
    }

    .search-content {
        height: 100rpx;
        padding: 0 $uni-page-space;

        .position-box {
            padding: 0 20rpx;
            height: 60rpx;
            border-radius: 60rpx;
            margin-right: $uni-page-space;
        }
    }

    .topkite {
        padding-bottom: calc(100rpx + constant(safe-area-inset-bottom)) !important;
        padding-bottom: calc(100rpx + env(safe-area-inset-bottom)) !important;
    }

    .kite-wrapper {
        min-height: 0; // 解决父元素flex:1时高度被子元素撑开

        .kite-classify {
            width: 180rpx;
            overflow-y: auto;

            .kite-classify-names {
                min-height: 100rpx;
                background-color: #f5f5f5;
                display: flex;
                align-items: center;
                color: #666;
                padding: 20rpx 0;

                .kite-classify-box {
                    width: 100%;
                    text-align: left;
                    padding: 0 10rpx 0 20rpx;
                    font-size: 26rpx;
                }

                &.kite-classify-active {
                    background-color: white;

                    .kite-classify-box {
                        border-left: 6rpx solid var(--color);
                        font-weight: bold;
                        font-size: 28rpx;
                    }
                }
            }

            .active-prev {
                border-bottom-right-radius: 10rpx;
            }

            .active-next {
                border-top-right-radius: 10rpx;
            }
        }

        .kite-goods {
            width: 98%;
            box-shadow: inset 2rpx -2rpx 6rpx 2rpx #f8f8f8;
            margin: 0 auto 20rpx;
            border-radius: 6rpx;

            .kite-goods-title {
                padding: 16rpx 10rpx 0 24rpx;
            }

            .kite-goods-warpper {
                width: 33.3%;
                min-height: 216rpx;
                text-align: center;

                .kite-img-box {
                    width: 128rpx;
                    height: 160rpx;
                    margin: 0 auto;

                    .kite-goods-img {
                        width: 120rpx;
                        height: 120rpx;
                    }
                }
            }
        }

        .subkite {
            line-height: 100rpx;
            white-space: nowrap;
            box-sizing: border-box;
            top: 0;
            left: 0;
            z-index: 10;

            .item {
                height: 50rpx;
                line-height: 50rpx;
                padding: 0 30rpx;
                border-radius: 25rpx;

                &.thmeColor {
                    background: var(--rgbacolor) !important;
                }
            }
        }
    }

    .list {
        width: 260rpx;

        .masks {
            background: rgba(0, 0, 0, 0.4);
            top: 0;
            left: 0;

            .sold {
                width: 150rpx;
                height: 150rpx;
            }
        }

        .shopName {
            padding: 4rpx 10rpx;
            border-radius: 10rpx;
            background-color: var(--btn-color);
        }
    }

    .list-1 {
        padding: 2rpx 0;

        .img {
            width: 230rpx;
            height: 230rpx;
        }

        .shopName {
            width: fit-content;
            height: 44rpx;
            line-height: 44rpx;
            padding: 0 16rpx;
            border-radius: 22rpx;
            background-color: var(--btn-color);
        }
    }

    .tagPanel {
        padding: 24rpx 24rpx 0 24rpx;

        .panel {
            border-radius: 12rpx;
        }

        .item {
            width: calc(50% - 8rpx);
            line-height: 70rpx;
            padding: 0 30rpx;
        }
    }

    .classNav {
        position: sticky;
        left: 0;
        z-index: 10;
    }

    .gridList {
        padding: 30rpx calc((100% - 450rpx) / 12) 0;

        image {
            width: 90rpx;
            height: 90rpx;
        }
    }

    .goodsItem {
        width: 335rpx;

        image {
            height: 335rpx;
        }
    }

    .storeItem {
        &:nth-child(3n-2) {
            background: #f7f6f2;
        }

        &:nth-child(3n-1) {
            background: #f8f2f2;
        }

        &:nth-child(3n) {
            background: #f9f4f8;
        }

        .logo {
            width: 80rpx;
            height: 80rpx;
        }

        .img {
            width: 200rpx;
            height: 200rpx;
        }

        .badge {
            background: rgba(0, 0, 0, 0.4);
            right: 10rpx;
            bottom: 10rpx;
        }
    }

    .goodname {
        font-size: var(--name-size);
    }

    .price {
        color: var(--price-color);
    }

    // 配置
    .shadow {
        box-shadow: 0 4rpx 24rpx rgba(100, 101, 102, 0.12);
    }

    .border {
        border: 1rpx solid #ebedf0;
    }

    .lr-space {
        padding: 0 calc((100vw - 180rpx - 520rpx) / 3);
    }

    .profit_title {
        height: 68rpx;
        background: var(--back-color);
        border-radius: 10rpx;
        overflow: hidden;
        font-weight: 600;
        color: var(--color);
        display: flex;
        align-items: center;
        padding-left: 10rpx;
    }
</style>
